<template>
  <div class="upload-journal">
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="600px"
      v-loading="loading"
      element-loading-text="导入中，请稍等"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.5)"
    >
      <div class="import">
        <div class="upload-demo">
          <el-upload
            class="upload-demo"
            ref="upload"
            :headers="setHeaders"
            :action="baseURL + '/sysJournal/import'"
            :before-upload="beforeUpload"
            :on-preview="handlePreview"
            :on-change="handleChange"
            :on-progress="handleprogress"
            :on-success="handleSuccess"
            :on-error="handleError"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :auto-upload="false"
            :multiple="multiple"
            :accept="accept"
            :data="initData"
            v-if="dialogVisible"
          >
            <el-button type="primary" plain ref="import"> 上传文件 </el-button>
          </el-upload>
        </div>

        <div class="text">
          <p>
            <span>没有模板？</span>
            <span class="clk">点击</span>
            <span class="btn" @click="handleDownload()">下载模板</span>
          </p>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
        <el-button type="primary" @click="submitForm('form')">上 传</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      title: '导入',
      dialogVisible: false,
      templatePort: '', //模板接口
      fileTemp: '',
      busEmit: '',
      errorTxt: '',
      setHeaders: { Authorization: sessionStorage.getItem('authorization') },
      multiple: true,
      fileList: [],
      fileData: [],
      accept: '.zip,.rar',
      fileCount: 0,
      UpLoadFilesLength: 0,
      initData: {},
      loading: false,
    }
  },
  props: ['curColumn'],
  mounted() {
    //导入书籍
    this.templatePort = 'sysJournal/openApi/down'
    this.busEmit = 'refreshJournalList'
    this.$bus.$on('showImportSysJournal', this.init)
  },
  beforeDestroy() {
    this.$bus.$off('showImportSysJournal')
  },
  methods: {
    //显示弹窗
    init() {
      this.errorTxt = ''
      this.dialogVisible = true
    },
    //下载模板
    handleDownload() {
      window.location.href = this.baseURL + this.templatePort
    },
    submitForm() {
      if (this.fileCount == 0) {
        this.warnMsg('请选择文件')
        return
      }
      this.loading = true
      this.$refs.upload.submit()
    },
    // 文件上传成功时的钩子
    handleSuccess(res, file, fileList) {
      if (res.code == 0) {
        let length = this.$refs.upload.uploadFiles.length
        this.UpLoadFilesLength++
        if (length == this.UpLoadFilesLength) {
          this.successMsg('导入成功')
          this.$refs.upload.clearFiles()
          this.dialogVisible = false
          this.$bus.$emit('refreshJournalList')
          this.loading = false
        }
      } else {
        this.$message({
          message: res.msg,
          type: 'warning',
        })
        this.loading = false
      }
    },
    handleChange(file, fileList) {
      this.fileCount = fileList.length
    },
    // 上传文件之前的钩子
    beforeUpload(file) {
      this.initData.columnId = this.curColumn.id
    },
    // 文件上传时的钩子
    handleprogress(event, file, fileList) {},
    // 点击文件列表中已上传的文件时的钩子
    handlePreview(file) {},
    beforeRemove(file, fileList) {
      // return this.$confirm(`确定移除 ${file.name}？`);
    },
    // 文件列表移除文件时的钩子
    handleRemove(file, fileList) {
      this.fileCount = fileList.length
    },
    handleError() {
      this.$message.error('上传失败，请重试')
    },
  },
}
</script>
<style scoped>
.import {
  min-height: 200px;
  margin-left: 60px;
}
.text {
  line-height: 100px;
}
.text .clk {
  padding-left: 20px;
  background: url('~@/assets/icon05.png') no-repeat left center;
}
.text .btn {
  color: #005ebb;
  cursor: pointer;
  border-bottom: 1px solid #005ebb;
}
.text .dis {
  color: #c0c4cc;
  cursor: not-allowed;
  border-bottom: 1px solid #c0c4cc;
}
.upload-journal >>> .el-loading-spinner i {
  font-size: 24px;
  color: #fff;
}
.upload-journal >>> .el-loading-spinner .el-loading-text {
  font-size: 18px;
  color: #fff;
}
</style>